<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElTreeSelect } from 'element-plus'
import { getDepartmentApi } from '@/api/department'
import type { DepartmentItem } from '@/api/department/types'

// const props =
defineProps({
  value: {
    type: Number || String,
    default: () => null
  },
  disabled: {
    type: Boolean,
    default: () => false
  }
})

// 定义model对象
const model = defineModel<number | string>()

// 加载数据
const departmentList = ref<DepartmentItem[]>([])
const treeLoading = ref(false)
const loadDeptList = async () => {
  treeLoading.value = true
  const res = await getDepartmentApi()
  departmentList.value = res.data
  await nextTick()
  treeLoading.value = false
}
loadDeptList()

const onDisabled = (value: boolean = false) => {
  console.log(value)
}

// 对外函数
defineExpose({
  onDisabled
})
</script>

<template>
  <el-tree-select
    v-model="model"
    node-key="id"
    clearable
    check-strictly
    default-expand-all
    :no-match-text="'+++'"
    :no-data-text="'---'"
    :disabled="disabled"
    :data="departmentList"
    :render-after-expand="false"
    :props="{
      label: 'name',
      children: 'child'
    }"
  />
</template>
